<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Jpetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="../js/index.js"></script>

    <!-- 在线导入 -->
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- 本地导入 -->

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>



</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
            <el-menu :default-openeds="['1', '3']" style="height: 100%"
                     background-color="rgb(48,65,86)"
                     text-color="#fff"
                     :collapse="isCollapse"
            >
                <div style="height: 60px;line-height: 60px;text-align: center">、
                    <img src="/images/logo-topbar.gif">
                </div>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-home"></i>
                        <span slot="title">查看首页</span></template>
                    <el-menu-item index="1-1" @click="handleMainFormClick">首页信息</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group title="分类选择">


                        <el-menu-item index="1-1-1" @click="handleCategory">分类选择</el-menu-item>



                    </el-menu-item-group>
                    <el-menu-item-group title="全部商品">
                        <el-menu-item index="1-2" @click="handleAllItem">全部商品</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>
                        <span slot="title">账户管理</span></template>
                    <el-menu-item index="2-1" @click="handleAccountClick">所有账户</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span></template>
                    <el-menu-item-group>
                        <template slot="title">请选择</template>
                        <el-menu-item index="3-1">个人中心</el-menu-item>

                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span></template>
                </el-submenu>

            </el-menu>
        </el-aside>
        <el-container >
            <el-header style=" font-size: 12px; display: flex">
                <div style="flex:1;font-size: 18px; width: 200px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>
                <div style="flex:1.2;font-size: 25px">
                    <b style="color: black">Jpetstore后台管理系统</b>
                </div>
                <el-dropdown>
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <span>朱阳</span>
            </el-header>

            <el-main >
                <div style="padding: 10px  0">
                    <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入名称" v-model="userid1"></el-input>
                        <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入邮箱" v-model="email1"></el-input>
                            <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入地址" v-model="addr11"></el-input>

                    <el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
                    <el-button style="margin-left: 10px" type="warning" @click="reset">重置</el-button>

                </div>
                <div style="margin: 10px 0 ">
                    <el-button type="primary" style="width: auto " @click="handleAdd">新增
                        <i class="el-icon-circle-plus-outline"></i>
                    </el-button>
                    <el-button type="danger" style="width: auto">批量删除
                        <i class="el-icon-remove-outline"></i>
                    </el-button>
                    <el-button type="success" style="width: auto">导入
                        <i class="el-icon-bottom"></i>
                    </el-button>
                    <el-button type="success" style="width: auto">导出
                        <i class="el-icon-top"></i>
                    </el-button>
                </div>


                <el-table :data="tableData" stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="userid" label="用户名" width="140">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="250">
                    </el-table-column>
                    <el-table-column prop="firstname" label="名" width="50">
                    </el-table-column>
                    <el-table-column prop="lastname" label="姓" width="50">
                   </el-table-column>
                    <el-table-column prop="status" label="状态"  width="50">
                    </el-table-column>
                    <el-table-column prop="addr1" label="地址1" width="200">
                    </el-table-column>
                    <el-table-column prop="addr2" label="地址2" width="200">
                    </el-table-column>
                    <el-table-column prop="city" label="城市" width="100">
                    </el-table-column>
                    <el-table-column prop="state" label="区域" width="50">
                    </el-table-column>
                    <el-table-column prop="zip" label="zip" width="100">
                    </el-table-column>
                    <el-table-column prop="country" label="国家" width="50">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话号码" width="200">
                    </el-table-column>



                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='再想想'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="您确定删除吗？"
                                    @confirm="handleDelete(scope.row.userid)"
                            >
                                <el-button type="danger" size="small" slot="reference"> 删除  <i class="el-icon-remove-outline"></i></el-button>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding: 10px 0">
                    <div class="block">

                        <el-pagination

                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="pageSize"
                                :current-page="pageNum"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"

                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>

                </div>
                <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
                    <el-form label-width="100px" size="small">

                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" :label-width="formLabelWidth">
                            <el-input v-model="form.email" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="名" :label-width="formLabelWidth">
                            <el-input v-model="form.firstname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="姓" :label-width="formLabelWidth">
                            <el-input v-model="form.lastname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-input v-model="form.status" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址1" :label-width="formLabelWidth">
                            <el-input v-model="form.addr1" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址2" :label-width="formLabelWidth">
                            <el-input v-model="form.addr2" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="城市" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="区域" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="zip" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="国家" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码" :label-width="formLabelWidth">
                            <el-input v-model="form.userid" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="活动区域" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveAccount">确 定</el-button>
                    </div>
                </el-dialog>


            </el-main>
        </el-container>
    </el-container>
</div>



<script type="text/javascript">


new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };

            return {
                // tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                pageNum: 1,
                pageSize: 10,
                total:100,
                username:" ",
                userid:" ",
                email:" ",
                address:" ",
                tableData: [] ,// 用于存储从后端获取的产品信息
                dialogFormVisible:false,
                form:{},
                userid1: " ",
                email1:" ",
                addr11:" ",
                multipleSelection:[]


            }
        },
         mounted() {

             axios.get('http://localhost:8080/accounts/page',
                 {
                     params: {
                         pageSize: this.pageSize, // 例如，假设每页显示10条数据
                         pageNum: this.pageNum    // 例如，假设要获取第一页的数据
                     }

                 }
             )
                  .then(response => {
                // 请求成功时更新产品列表
                   this.tableData = response.data.data;
                   console.log(response.data);
                      // console.log(tableData);
                      alert(tableData);
                   })
                      .catch(error => {
                // 处理请求错误
                      console.error('Error fetching products:', error);
                   });
        },
         methods: {
            collapse() {
                this.isCollapse = !this.isCollapse; // Toggle the value of isCollapse
                if(this.sideWidth)
                {
                    this.sideWidth= 64
                    // this.collapseBtnClass='el-icon-s-unfold'
                }
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.load()
            },
             handleAccountClick(){
                 window.location.href = "account.html";
             },
             handleMainFormClick(){
                 window.location.href="main.html";
             },
             handleCategory(){
                 window.location.href="category.html";
             },
             handleAllItem(){
                 window.location.href="allitem.html";
             },
             load(){
                 axios.get('http://localhost:8080/accounts/page',
                     {
                         params: {
                             pageSize: this.pageSize, // 例如，假设每页显示10条数据
                             pageNum: this.pageNum    // 例如，假设要获取第一页的数据
                         }

                     }
                 )
                     .then(response => {
                         // 请求成功时更新产品列表
                         this.tableData = response.data.data;
                         console.log(response.data);
                         // console.log(tableData);
                         alert(tableData);
                     })
                     .catch(error => {
                         // 处理请求错误
                         console.error('Error fetching products:', error);
                     });

             },
             reset(){
                this.userid=" ";
                this.email=" ";
                this.address=" ";
             },
             handleAdd()
             {
                 this.dialogFormVisible=true;
                 this.form={};
             },
             handleEdit(row){
                this.form=row;
                this.dialogFormVisible=true;
             },
             handleDelete(userid){
                axios.post("http://localhost:8080/accounts/accountDelete",userid).then(res=>
                {
                    if(res){

                    }
                })
             },
             handleSelectionChange(val){
                this.multipleSelection=val;//
                 //axios
                 //List<Account>accountList
             },
             saveAccount(){
                 axios.post("http://localhost:8080/accounts/accountInsert",this.form).then(res=>
                     {
                         if(res){
                             this.$message.success("保存成功");
                             this.dialogFormVisible=false;
                         }
                         else{
                             this.$message.error("保存失败")
                         }
                     }
                 )
             },
             search(){
                axios.get("http://localhost:8080/accounts/accountSearch",{
                   params:{
                       userid1:this.userid1,
                       email1:this.email,
                       addr1:this.addr1
                   }
                    })
                    .then(res=>
                {
                    this.tableData = response.data.data;
                })
                    .catch(error => {
                        // 处理请求错误
                        console.error('Error fetching products:', error);
                    });

             }


         }



    })
</script>

</body>
</html>